<template xmlns:background-color="http://www.w3.org/1999/xhtml">
    <a-row :gutter="10">
        <a-col :md="12" :sm="24">
            <a-card :bordered="false">
                <!-- 按钮操作区域 -->
                <a-row style="margin-left: 14px">
                    <a-button @click="handleAdd(1)" type="primary">添加部门</a-button>
                    <a-button @click="handleAdd(2)" type="primary">添加下级</a-button>
                    <a-button type="primary" icon="download" @click="handleExportXls('部门信息')">导出</a-button>
                    <a-upload name="file" :showUploadList="false" :multiple="false" :action="importExcelUrl" @change="handleImportExcel">
                    <a-button type="primary" icon="import">导入</a-button>
                    </a-upload>
                    <a-button title="删除多条数据" @click="batchDel" type="default">批量删除</a-button>
                </a-row>
                <div style="background: #fff;padding-left: 16px;height: 100%;margin-top: 5px">
                    <a-alert type="info" :showIcon="true">
                        <div slot="message">
                            当前选择：
                            <span v-if="this.currSelected.title">{{getCurrentedTitle()}}</span>
                            <a v-if="this.currSelected.title" @click="onClearSelected">取消选择</a>
                        </div>
                    </a-alert>
                    <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入部门名称"/>
                    <!-- 树 -->
                    <a-col :md="10" :sm="24">
                        <template>
                            <a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
                                <span style="user-select: none">
                                    <a-tree 
                                        checkable
                                        multiple
                                        @select="onSelect"
                                        @check="onCheck"
                                        @rightClick="rightHandle"
                                        :selectedKeys="selectedKeys"
                                        :checkedKeys="checkedKeys"
                                        :treeData="departTree"
                                        :checkStrictly="checkStrictly"
                                        :expandedKeys="iExpandedKeys"
                                        :load-data="loadSubTree"
                                        :autoExpandParent="autoExpandParent"
                                        @expand="onExpand"
                                     />
                                </span>
                                <!-- 点击右键 增删功能 -->
                                <a-menu slot="overlay">
                                    <a-menu-item @click="handleAdd(3)" key="1">添加</a-menu-item>
                                    <a-menu-item @click="handleDelete" key="2">删除</a-menu-item>
                                    <a-menu-item @click="closeDrop" key="3">取消</a-menu-item>
                                </a-menu>
                            </a-dropdown>
                        </template>
                    </a-col>
                </div>
            </a-card>
        </a-col>
        <a-col :md="12" :sm="24">
            <a-tabs defaultActiveKey="1">
                <a-tab-pane tab="基本信息" key="1">
                    <!-- 树节点选中后才会显示的card -->
                    <a-card :border="false" v-if="selectedKeys.length>0">
                        <a-form-model ref="form" :model="model" :rules="validatorRules">
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="departName" label="机构名称">
                                <a-input placeholder="请输入机构/部门名称" v-model="model.departName"/>
                            </a-form-model-item>
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级部门"> 
                                <a-tree-select 
                                    style="width: 100%" 
                                    :dropdownStyle="{maxHeight: '200px',overflow: 'auto'}"
                                    :treeData="treeData"
                                    :disabled="disable"
                                    v-model="model.parentId"
                                    ></a-tree-select>
                            </a-form-model-item>
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="机构编码" prop="orgCode"> 
                                  <a-input disabled placeholder="请输入机构编码" v-model="model.orgCode"/>
                            </a-form-model-item>
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="机构类型" prop="orgCategory"> 
                                  <template v-if="orgCategoryDisabled">
                                    <a-radio-group v-model="model.orgCategory" placeholder="请选择机构类型">
                                        <a-radio value="1">
                                        公司
                                        </a-radio>
                                    </a-radio-group>
                                    </template>
                                    <template v-else>
                                    <a-radio-group v-model="model.orgCategory" placeholder="请选择机构类型">
                                        <a-radio value="2">
                                        部门
                                        </a-radio>
                                        <a-radio value="3">
                                        岗位
                                        </a-radio>
                                    </a-radio-group>
                                    </template>
                            </a-form-model-item>
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序" prop="departOrder"> 
                                 <a-input-number v-model="model.departOrder"/>
                            </a-form-model-item>
                             <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="手机号" prop="mobile"> 
                                 <a-input placeholder="请输入手机号" v-model="model.mobile"/>
                            </a-form-model-item>
                             <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="地址" prop="address"> 
                                 <a-input placeholder="请输入地址" v-model="model.address"/>
                            </a-form-model-item>
                            <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注" prop="memo"> 
                                 <a-input placeholder="请输入备注" v-model="model.memo"/>
                            </a-form-model-item>
                        </a-form-model>
                        <div class="anty-form-btn">
                           <a-button @click="emptyCurrForm" type="default" htmlType="button" icon="sync">重置</a-button>
                            <a-button @click="submitCurrForm" type="primary" htmlType="button" icon="form">保存</a-button>
                        </div>
                    </a-card>
                    <!-- else 树节点不选中显示的card -->
                    <a-card v-else>
                        <a-empty>
                            <span slot="description">请先选择一个部门!</span>
                        </a-empty>
                    </a-card>
                </a-tab-pane>
                <!-- forceRender： 被隐藏时 是否渲染DOM 默认为false-->
                <a-tab-pane tab="部门权限" key="2" forceRender>
                    <depart-auth-form ref="departAuth"></depart-auth-form>
                </a-tab-pane>
            </a-tabs>
        </a-col>
        <!-- 管理部门的表单 -->
        <depart-form ref="departForm"></depart-form>


    </a-row>
</template>
<script>
import {queryDepartTree,querySubDepartTree} from '@/mock'
import DepartForm from './form/DepartForm.vue'
import DepartAuthForm from './form/DepartAuthForm.vue'
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
    name: 'DepartList',
    components: {
        DepartForm,
        DepartAuthForm
    },
    // mixins: [JeecgListMixin],
    data() {
        return {
            // 当前选中的对象
            currSelected: {},
            // 选中树的节点
            selectedKeys: [],
            // 选中多选框树的节点
            checkedKeys: [],
            // 树的数据
            departTree: [],
            // 父子节点是否关联起来
            checkStrictly:true,
            // expand 展开的节点
            iExpandedKeys: [],
            // 是否自动展开父节点
            autoExpandParent: true,
            allTreeKeys: [],
            // tree的加载loading
            loading: false,
            // 下拉选项触发点类型
            dropTrigger: '',
            // formModel双向绑定的对象
            model: {},
            // form表单的校验规则配置
            validatorRules: {
                departName: [{required: true,message: '请输入机构/部门名称！'}],
                orgCode: [{required: true,message: '请输入机构编码！'}],
                orgCategory: [{required: true,message: '请输入机构类型'}],
            },
            // 设置form的宽度
             labelCol: {
                xs: {span: 24},
                sm: {span: 5}
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16}
            },
            // 所有树节点的key信息
             allIds: [],
            //  下拉树的data
             treeData: [],
            //  默认禁用下拉框
             disable: true,
            //  form表单中的元素
             orgCategoryDisabled: true
        }
    },
     computed: {
      importExcelUrl: function () {
        return 'http://aaaaaaaaaa';
      }
    },
    methods: {
        // 显示当前选中的title
        getCurrentedTitle() {
            return !this.currSelected.title ? '': this.currSelected.title;
        },
        // 取消选择
        onClearSelected() {

        },
        // 导入
        handleImportExcel() {

        },
        batchDel() {

        },
        handleAdd() {
             this.$refs.departForm.visible = true;
             this.$refs.departForm.title = "新增";
             this.$refs.departForm.disableSubmit = false;
        },
        onSearch() {},
        // tree展开的回调
        onExpand(expandedKeys) {
            console.log('expandedKeys',expandedKeys);
            // this.iExpandedKeys = expandedKeys;
            // 这是手动展开tree的回调 既然走了这里 那么tree已经是手动展开了 所以要更改自动展开父节点的属性
            this.autoExpandParent = false;
        },
        // 加载tree 其实就是发送请求加载数据
        loadTree() {
            var that = this;
            that.departTree = [];
             that.allIds = []
            queryDepartTree().then(res=>{
                if(res.success) {
                    this.allTreeKeys = [];
                    for(let i=0;i<res.result.length;i++) {
                        let temp = res.result[i];
                        // 左侧tree数据
                        that.departTree.push(temp);
                        // 用于右侧表单下拉框的数据
                        that.treeData.push(temp);
                        that.allIds.push(temp.key)
                    }

                    this.loading = false;
                }
            })
        },
        // 异步加载树节点 这个方法原来是一个接口 不传参就是查询根节点 传参就是传入节点的id 然后查询子节点 
        // 假数据分成两个请求
        // TODO 要修改
        loadSubTree(treeNode) {
            var that = this;
            querySubDepartTree().then(res=>{
                if (res.success) {
                    if(res.result.length == 0){
                        treeNode.dataRef['isLeaf']=true
                        return;
                    }else {
                        treeNode.dataRef['children']= res.result;
                    }
                     for (let i = 0; i < res.result.length; i++) {
                        let temp = res.result[i]
                        that.allIds.push(temp.key)
                        // loadTreeKeys 在树节点展开的时候存放的节点数据 
                        // 如果loadTreeKeys中存在该节点 证明该节点是展开的 所以将展开的keys存进去iExpandedKeys
                        if(that.loadTreeKeys.indexOf(temp.key)>0){
                        that.iExpandedKeys.push(temp.key)
                        }
                     }
                }
            })
        },
        rightHandle() {},
        onCheck() {},
        // 树的选中 单选选中 处理selectedKeys 然后控制右侧的表单的显示
        onSelect(selectedKeys,e) {
            // 左侧树的单选有两个逻辑
            // 1. 通过控制selectedKeys 来控制右侧基本信息的表单的显示 然后将节点的数据赋值给表单
            // 2. 
            this.hiding = false
            // 拿到节点数据
            let record = e.node.dataRef;
            // 复制一个节点的对象出来 不破坏原始的数据
            this.currSelected = Object.assign({},record)
            this.model.parentId = record.parentId;
            this.selectedKeys = [record.key]
            // 将节点的值赋值给表单
            this.setValuesToForm(record)
        },
        // 给表单赋值
        setValuesToForm(record) {
            if(record.orgCategory == '1'){
                // 禁用表单中的元素
                this.orgCategoryDisabled = true;
            }else{
                 this.orgCategoryDisabled = false;
            }
        },
        closeDrop() {},
        dropStatus() {},
        handleDelete() {},
        // 重置
        emptyCurrForm() {},
        // 提交
        submitCurrForm() {}
    },
    created() {
        this.loadTree()
    },
}
</script>
<style lang="less" scoped>
.ant-btn {
    margin-left: 3px;
}
 .anty-form-btn {
    width: 100%;
    text-align: center;
  }

  .anty-form-btn button {
    margin: 0 5px;
  }
</style>